/**
* @Description： 主界面样式　
*/

@import "../../styles/color.scss";
.home-container {
  position: relative;
  .home-main {
    //左侧菜单栏
    .home-left {
      height: calc(100vh - 40px);
      background: $primary-color;
      // 侧边栏字体大小颜色
      .el-submenu__title, .el-menu-item {
        font-size: 16px;
        color: #fff;
        transition: 1s;
        i, .svg-icon {
          color: #fff !important;
        }
      }

      // 侧边栏悬浮
      .el-menu-item.is-active{
        background: $secondary-color !important;
        color:$font-active;
        i{
          color: $font-active !important;
        }
        svg{
          color: $font-active;
        }
      }

      .el-menu-item:hover, .el-submenu__title:hover, .el-submenu__title i:hover{
        background: $secondary-color;
        color: #fff;
        i{
          color: #fff !important;
        }
        svg{
          color: #fff;
        }
      }
    }

    .home-main-box {
      background: $background-color;
      padding: 24px !important;
    }
  }
}

/*弹出菜单样式 */
.el-menu--vertical, .el-menu--horizontal{
  .el-menu--popup{
    background: $primary-color;
    padding: 0 !important;
    /*标题颜色*/
    .el-submenu__title,.el-menu-item{
      background: transparent;
      color: #fff;
    }

    /*标题图标颜色*/
    .el-submenu__title i,.el-menu-item i,.el-menu-item svg{
      color: #fff;
    }
    .el-menu-item:hover,.el-submenu__title:hover,.el-submenu__title i:hover,.el-menu-item.is-active{
      transition: 1s;
      background: $secondary-color;
      color: $font-active;
      i{
        color: $font-active !important;
      }
      svg{
        color: $font-active;
      }
    }

    .el-menu--inline{
      background: transparent;
    }
  }
}

.home-main-content{
  margin-top: 32px;
}
